<template>
  <div class="app-top">
    <div class="g-oneline-space-between">
      <div class="top-line">
        <el-button
          v-if="leftCollapse"
          class="collapse-button"
          icon="el-icon-s-unfold"
          @click="setLeftExtend"
        />
        <el-button v-else class="collapse-button" icon="el-icon-s-fold" @click="setLeftCollapse" />
        <span style="color: #97a8be;cursor: text;font-size: 14px;margin-left: 15px">
          {{ $store.getters['menu/getSessionActiveMenuName'] }}
        </span>
      </div>
      <div class="top-line">
        <LangSet class="g-no-select-pointer" style="margin-right: 15px" />
        <el-dropdown trigger="click">
          <span class="g-no-select-pointer" style="margin-right: 15px">
            {{ userName }}
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span style="display: block" @click="handleLogout">{{ $t('Login.logOut') }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogout } from '../../../api/sys/user'
import LangSet from '../../../lang/LangSet'

export default {
  name: 'Top',
  components: { LangSet },
  data() {
    return {}
  },
  computed: {
    userName() {
      return this.$store.getters['user/getSessionUser'].userName
    },
    leftCollapse() {
      return this.$store.getters['style/getLeftCollapse']
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleLogout() {
      userLogout()
        .then(() => {
          this.$store.dispatch('login/logout')
        })
        .catch(err => console.log(err))
    },
    setLeftCollapse() {
      this.$store.commit('style/SET_LEFT_COLLAPSE', true)
    },
    setLeftExtend() {
      this.$store.commit('style/SET_LEFT_COLLAPSE', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-top {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #fffdfe;
  box-shadow: 0 4px 5px rgba(0, 21, 41, 0.08);
}
.top-line {
  height: 40px;
  line-height: 40px;
}
.collapse-button {
  height: 32px;
  width: 35px;
  padding: 0;
  border-radius: 0;
  border: 0;
  font-size: 20px;
}
</style>
